<template>
  <div>
    <el-tree
      :data="menus"
      :props="defaultProps"
      show-checkbox
      default-expand-all
      :expand-on-click-node="false"
      node-key="mid"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click="() => append(data)"
            v-if="node.childNodes.length != 0"
          >
            Append
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => remove(node, data)"
            v-if="node.childNodes.length == 0"
          >
            Delete
          </el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menus: [],
      defaultProps: {
        children: "children",
        label: "mname",
      },
    };
  },
  mounted() {
    this.loadMenu();
  },
  methods: {
    append(data) {
      console.log("append:");
    },

    remove(node, data) {
      // console.log("remove,", node, data);
      this.$axios.get("/menu/remove/"+data.mid).then((resp) => {
        if (resp.data.code == 200) {
          this.$message('删除成功')
          this.loadMenu();
        }else{
          this.$message(resp.data.data)
        }
      });
    },
    loadMenu() {
      this.$axios.get("/menu/getAll").then((resp) => {
        if (resp.data.code == 200) {
          this.menus = resp.data.data;
        }
      });
    },
  },
};
</script>

<style>
</style>